import { useRequest } from "ahooks";
import { DatePicker, Form, Input, Select, TreeSelect } from "antd";
import { PropsWithChildren } from "react";
import {
  fetchAreaCourtStatistic,
  fetchCourtLevel,
  fetchDocumentType,
  fetchTrialLevel,
} from "../api";
import { FormInstance } from "antd/lib";

interface IFilterFormProps {
  className?: string;
  form?: FormInstance<any>;
}
export function FilterForm(props: PropsWithChildren<IFilterFormProps>) {
  const { form } = props
  const { data: courtLevelList } = useRequest(() => fetchCourtLevel());
  const { data: trialLevelList } = useRequest(() => fetchTrialLevel());
  const { data: documentTypeList } = useRequest(() => fetchDocumentType());
  const { data: areaCourtStatisticList } = useRequest(() =>
    fetchAreaCourtStatistic()
  );

  return (
    <Form form={form} layout="inline" className="filterForm">
      <div className="flex flex-row w-full">
        <div className="flex-1">
          <Form.Item name="keyword" label="关键字">
            <Input allowClear placeholder="请输入" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="level" label="法院层级">
            <Select allowClear options={courtLevelList} placeholder="请选择" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="court" label="地域与法院">
            <TreeSelect
              treeData={areaCourtStatisticList}
              placeholder="请选择"
              fieldNames={{ label: "name", value: "name" }}
              treeCheckable
              allowClear
              maxTagCount={4}
              showCheckedStrategy={"SHOW_PARENT"}
            />
          </Form.Item>
        </div>
      </div>
      <div className="flex flex-row w-full mt-[24px]">
        <div className="flex-1">
          <Form.Item name="judgment_date" label="裁判年份">
            <DatePicker.RangePicker allowClear picker="year" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="case_status" label="审判程序">
            <Select placeholder="请选择" allowClear options={trialLevelList} />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="docType" label="文书类型">
            <Select
              placeholder="请选择"
              allowClear
              options={documentTypeList}
            />
          </Form.Item>
        </div>
      </div>
    </Form>
  );
}
